import React from "react";
import { Loading } from "components/index";
import { Input, Button } from "antd";

export default {
  key: "loading",
  name: "Loading 加载",
  author: "吴程龙",
  description: "异步过程中的加载",
  isExampleFull: true,
  api: [
    {
      title: "API",
      description: "用css实现的动画效果，可修改动画",
      data: [
        {
          param: "title",
          description: "标题",
          type: "string",
          defaultValue: "加载中...",
        },
        {
          param: "description",
          description: "描述",
          type: "string",
          defaultValue: "请稍等...",
        },
        {
          param: "content",
          description: "加载动画包裹的内容",
          type: "React Node",
          defaultValue: "无",
        },
      ],
    },
    {
      title: "METHOD",
      description: "方法打开，减少render方法中的Node",
      data: [
        {
          param: "open",
          description: "弹窗loading",
          type: "Loading.open(env, props),返回一个关闭弹窗的方法",
          defaultValue: "无",
        },
      ],
    },
  ],
  example: [
    {
      title: "基础用法",
      description: "按钮打开加载，2秒后关闭",
      state: {
        title: "加载中...",
        description: "请稍等...",
      },
      getMethod: (context) => {
        return {
          open: (title, description) => {
            let close = Loading.open(context, {
              title,
              description,
            });
            setTimeout(() => {
              close();
            }, 2000);
          },
          onPropsChange: (propName, e) => {
            context.setState({
              [propName]: e.target.value,
            });
          },
        };
      },
      getContent: (context) => {
        const { title, description } = context.state;
        return (
          <div style={{ width: "100%" }}>
            <div className={"mt-10"}>
              <div>标题:&nbsp;&nbsp;</div>
              <Input value={title} onChange={(e) => context.onPropsChange("title", e)} />
            </div>
            <div className={"mt-10"}>
              <div>描述:&nbsp;&nbsp;</div>
              <Input value={description} onChange={(e) => context.onPropsChange("description", e)} />
            </div>
            <div>
              <Button onClick={() => context.open(title, description)} type={"primary"}>
                打开加载
              </Button>
            </div>
          </div>
        );
      },
    },
  ],
};
